<template>
	<view class="pageFixed">
		<uni-popup ref="popup" background-color="#eee" :safe-area="false" :padding="padding">
			<view class="content" style="border-radius: 20rpx 20rpx 0 0;">
				<view class="" style="background-color: #fff;">
					<view class="info">
						<view class="info-img" style="padding: 5rpx; border: 1rpx solid #eee;">
							<image :src="imgurl" style="height: 180rpx; width: 180rpx;"></image>
						</view>
						<view class="" style="margin-left: 30rpx;">
							<view class="" style="color: #ff0000;">￥<text
									v-if="!priceShow">{{ goodsInfo.default_price }}</text><text v-if="priceShow"
									style="font-size: 35rpx;">{{ price.dayRent }}</text>/天
								<text v-if="priceShow && price.dayRent_new"
									style="font-size: 25rpx; color: #000; margin-left: 10rpx;">首月￥{{ price.dayRent_new }}/天</text>
								<image v-if="priceShow && price.dayRent_new"
									src="../../static/images/goodsDetails/end1.gif"
									style="width: 60rpx; height: 30rpx; margin: 0 0 10rpx 10rpx;"></image>
							</view>
							<view class="">
								<text>已选：</text>
								<text style="font-size: 13px;">{{ activity1.title }}<text
										v-if="activity2.title && activity1.title">,</text>{{ activity2.title }}<text
										v-if="activity3.title && activity2.title">,</text>{{ activity3.title }}<text
										v-if="activity4.title && activity3.title">,</text>{{ activity4.title }}</text>
							</view>
						</view>
					</view>
					<view class="price" v-show="priceShow">
						<view v-show="priceShow" class="price-item">
							<view class="" style="color: #ff0000;">￥{{ price.firstRent }}</view>
							<view class="" style="color: #999;font-size: 12px;">首期租金</view>
						</view>
						<view v-show="priceShow" class="price-item">
							<view class="" style="color: #ff0000;">￥{{ price.totalRent }}</view>
							<view class="" style="color: #999;font-size: 12px;">总租金</view>
						</view>
						<view v-show="priceShow" class="price-item">
							<view class="" style="color: #ff0000;">￥{{ price.totalValue }}</view>
							<view class="" style="color: #999;font-size: 12px;">买断价</view>
						</view>
					</view>
				</view>
				<view class="menu" style="background-color: #fff; margin-top: 20rpx;">
					<view class="" style="font-size: 13px;">租赁套餐</view>
					<text v-for="(item, index) in goodsInfo.pact_type"
						:class="['text', index === activity1.index ? 'index' :'']" :data-text="item"
						@click="clickActivity1(index, $event)" :key="index">
						{{ item }}</text>

					<view class="" style="font-size: 13px;">颜色</view>
					<text v-for="(item, index) in color" :class="['text', index === activity2.index ? 'index' :'']"
						:data-text="item.value" @click="clickActivity2(index, $event)"
						:key="index">{{ item.value }}</text>

					<view class="" style="font-size: 13px;">规格</view>
					<text v-for="(item, index) in guige" :class="['text', index === activity3.index ? 'index' :'']"
						:data-text="item.value" @click="clickActivity3(index, $event)"
						:key="index">{{ item.value }}</text>

					<view class="" style="font-size: 13px;">租期</view>
					<text v-for="(item, index) in time" :class="['text', index === activity4.index ? 'index' :'']"
						:data-text="item.value" @click="clickActivity4(index, $event)"
						:key="index">{{ item.value }}</text>

					<view class="" style="display: flex; justify-content: space-between; align-items: center;">
						<view class="" style="font-size: 13px;">租赁数量</view>
						<view class="compute">
							<text class="text" @click="add"> + </text>
							<text class="text" style="padding: 10rpx 30rpx;">{{ count }}</text>
							<text class="text" @click="mun"> - </text>
						</view>
					</view>
					<view class="" style="position: fixed;bottom: 20;width: 100%;left: -5rpx;background-color: #fff;">
						<button class="button" :disabled="!priceShow"
							:class="[priceShow ? 'click' : 'noClick']" style="color: #fff;">查看免押额度</button>
					</view>

				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "goodMenu",
		props: {
			goodsInfo: {
				type: Object
			}
		},
		data() {
			return {
				padding: 0,
				id: null,
				activity1: {
					id: 1,
					index: null, //控制样式
					title: "" //获取套餐信息发送至后端
				},
				activity2: {
					id: 2,
					index: null,
					title: ""
				},
				activity3: {
					id: 3,
					index: null,
					title: ""
				},
				activity4: {
					id: 4,
					index: null,
					title: ""
				},
				imgurl: '', //展示图片
				color: [], //颜色选择
				guige: [], //规格选择
				time: [], //租期选择
				price: {}, //获取到的价格
				count: 1, //数量
				tel: '',
				priceShow: false //判断是否显示具体价格以及按钮样式是否可以点击
			};
		},
		methods: {
			// 打开弹窗
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			// 控制选择的样式以及获取到选择的数据
			clickActivity1(i, e) {
				if (this.activity1.index === i) {
					this.activity1.index = null
					this.activity1.title = ""
					this.priceShow = false
				} else {
					this.activity1.index = i
					this.activity1.title = e.currentTarget.dataset.text
				}
				if (this.activity1.index !== null && this.activity2.index !== null && this.activity3.index !== null && this
					.activity4.index !== null) {
					this.getPrice()
				} else return
			},
			clickActivity2(i, e) {
				if (this.activity2.index === i) {
					this.activity2.index = null
					this.activity2.title = ""
					this.priceShow = false
				} else {
					this.activity2.index = i
					this.activity2.title = e.currentTarget.dataset.text
				}
				if (this.activity1.index !== null && this.activity2.index !== null && this.activity3.index !== null && this
					.activity4.index !== null) {
					this.getPrice()
				} else return
			},
			clickActivity3(i, e) {
				if (this.activity3.index === i) {
					this.activity3.index = null
					this.activity3.title = ""
					this.priceShow = false
				} else {
					this.activity3.index = i
					this.activity3.title = e.currentTarget.dataset.text
				}
				if (this.activity1.index !== null && this.activity2.index !== null && this.activity3.index !== null && this
					.activity4.index !== null) {
					this.getPrice()
				} else return
			},
			clickActivity4(i, e) {
				if (this.activity4.index === i) {
					this.activity4.index = null
					this.activity4.title = ""
					this.priceShow = false
				} else {
					this.activity4.index = i
					this.activity4.title = e.currentTarget.dataset.text
				}
				if (this.activity1.index !== null && this.activity2.index !== null && this.activity3.index !== null && this
					.activity4.index !== null) {
					this.getPrice()
				} else return
			},
			// 判断库存再进行数量增加
			add() {
				if (this.count < this.price.quantity) {
					this.count++
				}
			},
			// 数量为1不再减
			mun() {
				if (this.count === 1) return
				this.count--
			},
			// 获取价格
			getPrice() {
				let params = [{
					title: this.activity1.title
				}, {
					title: this.activity2.title
				}, {
					title: this.activity3.title
				}, {
					title: this.activity4.title
				}]
				if (this.goodsInfo.activity.length == 0) {
					// uni.$http.get(
					// 		`/Wechat/Goods/getGoodsPrices?allDataList=${ JSON.stringify(params) }&goods_id=${ this.goodsInfo.id }`
					// 	)
					// 	.then(res => {
					// 		this.priceShow = true
					// 		this.imgurl = getApp().globalData.baseImg + res.data.data.meal_img
					// 		this.price = res.data.data
					// 		console.log(this.goodsInfo)
					// 		console.log(this.price)
					// 	})
				} else {
					console.log(params)
					console.log('商品id：' + this.goodsInfo.id)
					console.log('活动id:' + this.goodsInfo.activity[0].id)
					// uni.$http.get(
					// 		`/Wechat/Goods/getGoodsPrices?allDataList=${ JSON.stringify(params) }&goods_id=${ this.goodsInfo.id }&activity_id=${ this.goodsInfo.activity[0].id }`
					// 	)
					// 	.then(res => {
					// 		this.priceShow = true
					// 		this.imgurl = getApp().globalData.baseImg + res.data.data.meal_img
					// 		this.price = res.data.data
					// 		console.log(this.price)
					// 	})

				}

			}

		}
	}
</script>

<style scoped lang="scss">
	// .pageFixed{
	// 	position: fixed;
	// 	height: 100vh;
	// }
	.content {
		height: 1070rpx;
		overflow-y: auto;
	}

	.info {
		display: flex;
		padding: 20rpx;
	}

	.ingo-img {
		padding: 10rpx;
		border: 1rpx solid #eee;
	}

	.text {
		display: inline-block;
		background-color: rgb(239, 239, 239);
		padding: 10rpx 35rpx;
		border-radius: 30rpx;
		margin: 10rpx 15rpx;
		font-size: 12px;
	}

	.index {
		color: #E1261B;
		border: 1rpx solid #E1261B;
		background-color: rgb(255, 243, 243);
		font-size: 12px;
	}

	.price {
		display: flex;
		justify-content: space-around;
		align-items: center;
		// margin: 30rpx 0;
		padding: 10rpx 10rpx 20rpx 10rpx;
		height: 80rpx;
	}

	.menu {
		padding: 20rpx;
	}

	.compute .text {
		display: inline-block;
		border: 0.5rpx solid #eee;
		padding: 10rpx;
	}

	.button {
		width: 90%;
		border-radius: 40rpx;
		text-align: center;
		margin-top: 50rpx;
	}

	.click {
		height: 80rpx;
		line-height: 80rpx;
		background-color: rgb(241, 47, 37);
	}

	.noClick {
		height: 80rpx;
		line-height: 80rpx;
		background-image: linear-gradient(to right, rgb(91, 87, 86), rgb(184, 178, 178));
	}
</style>
